<template>
  <div class="content-right">
    <div class="sidebar-creator card">
      <div class="creator-hd">
        <el-icon><Memo /></el-icon>
        <span class="creator-hd-title">创作中心</span>
        <div class="creator-hd-drafts">草稿箱(2)</div>
      </div>
      <div class="creator-db">
         <ul>
           <li>
             <el-icon><Document /></el-icon>
             <p>回答问题</p>
           </li>
           <li>
             <el-icon><Document /></el-icon>
             <p>发视频</p>
           </li>
           <li>
             <el-icon><Document /></el-icon>
             <p>写文章</p>
           </li>
           <li>
             <el-icon><Document /></el-icon>
             <p>写想法</p>
           </li>
         </ul>
      </div>
      <div class="creator-fd">
        <div class="creator-fd-list">
            <ul>
              <li>1</li>
            </ul>
          <ul>
            <li>2</li>
          </ul>
          <ul>
            <li>3</li>
          </ul>
          <ul>
            <li>4</li>
          </ul>
        </div>
      </div>
    </div>

<!--    di二个,推荐关注-->
    <div class="sidebar-recommend card">
    <div class="recommend-bd">

      <ul>
        <li>
          <img src="@/assets/images/article1.png" alt="">
          <div class="recommend-content">
             <div class="recommend-head">放啊</div>
             <div class="recommend-detail">你可能感兴趣</div>
          </div>
          <div class="recommend-button">
            <el-icon size="18"><Plus /></el-icon><span>关注</span>
          </div>
        </li>
       <li>
          <img src="@/assets/images/article1.png" alt="">
          <div class="recommend-content">
             <div class="recommend-head">放啊1</div>
             <div class="recommend-detail">你可能感兴趣</div>
          </div>
          <div class="recommend-button">
            <el-icon size="18"><Plus /></el-icon><span>关注</span>
          </div>
        </li>
       <li>
          <img src="@/assets/images/article1.png" alt="">
          <div class="recommend-content">
             <div class="recommend-head">放啊2</div>
             <div class="recommend-detail">你可能感兴趣</div>
          </div>
          <div class="recommend-button">
            <el-icon size="18"><Plus /></el-icon><span>关注</span>
          </div>
        </li>
      </ul>
    </div>
    </div>
    <div class="sidebar-category card">
        <ul>
          <li>
            <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-disanfangdengluweixin"></use>
            </svg>
            <p>你可</p>
          </li>
          <li>
            <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-disanfangdengluweixin"></use>
            </svg>
            <p>你可</p>
          </li>
          <li>
            <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-disanfangdengluweixin"></use>
            </svg>
            <p>你可</p>
          </li>
          <li>
            <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-disanfangdengluweixin"></use>
            </svg>
            <p>你可</p>
          </li>
          <li>
            <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-disanfangdengluweixin"></use>
            </svg>
            <p>你可</p>
          </li>
          <li>
            <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-disanfangdengluweixin"></use>
            </svg>
            <p>你可</p>
          </li>
        </ul>
    </div>
    <div class="sidebar-namlist card">

4
    </div>
  </div>
</template>
<script setup>

</script>
<style scoped>
@import '@/assets/css/index.css';


.content-right {
  width: 290px;
}

.sidebar-creator{
  padding: 10px;
}
.creator-hd{
  display: flex;
  align-items: center;
}
.creator-hd-title {
  flex: 1;
  margin-left: 5px;
}
.creator-hd-drafts{
  color: #8491A5;
  font-size: 12px;
}

.creator-db ul{
  display: flex;
  justify-content: space-between; /*两端对齐*/
}

.creator-db p{
  margin: 0;
}

.creator-db ul li{
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;/*轴线垂直*/
  align-items: center;
  margin: 10px 0;
}

.creator-db ul li i {
  display: block;
  font-size: 22px;
  margin-bottom: 15px;
  border-radius: 50%;
  width: 40px;
  line-height: 45px;
  height: 40px;
  background-color: #b8e5f8;
}

/*结构伪类选择器*/
.creator-db ul li:nth-child(1) i {
  background-color: #E0ECFF;
  color: #0066FF;
}

/*结构伪类选择器*/
.creator-db ul li:nth-child(2) i {
  background-color: #FFF2E1;
  color: #FFA830;
}

/*结构伪类选择器*/
.creator-db ul li:nth-child(3) i {
  background-color: #E0ECFF;
  color: #0066FF;
}

/*结构伪类选择器*/
.creator-db ul li:nth-child(4) i {
  background-color: #FFF2E1;
  color: #FFA830;
}


.creator-fd{
  background-color: #f9f9fa;
  font-size: 12px;
  width: 100%;
  height: 100px;
  overflow: hidden;
}

.creator-fd-list{
  width: 100%;
  height: 100%;
  animation: scroll 10s infinite;
}

.creator-fd-list ul li{
  height: 100px;
}

.creator-fd-list:hover{
  animation-play-state: paused;
}

/*动画*/
@keyframes scroll {
  0%{
    transform: translateY(0px);
  }
  25%{
    transform: translateY(-100px);
  }
  50%{
    transform: translateY(-200px);
  }
  75%{
    transform: translateY(-300px);
  }
  100%{
     transform: translateY(-400px);
  }
}


.recommend-bd ul li{
  display: flex;
  align-items: center;
  margin: 10px 0;

}

.recommend-bd ul li>img{
  width: 38px;
  height: 38px;
  border-radius: 3px;
}

.recommend-content {
  flex: 1;
  margin-left: 5px;
  font-size: 12px;
}

.recommend-button{
  display: flex;
  color: dodgerblue;
  align-items: center;
  cursor: pointer;
}

.sidebar-category ul{
  display: flex;
  flex-wrap: wrap;
  text-align: center;
//padding: 10px;
}
.sidebar-category ul li {
  width: 33.33%;
  margin: 5px 0;
}
.sidebar-category ul p {
  margin: 0;
}
.sidebar-category ul svg {
  width: 30px;
  height: 30px;
}


</style>